<template>
	<view class="free-courses">
		<shop-head></shop-head>
		<!-- <video v-if="inform.audio"
			:src="`https://newxuejingres.oss-cn-beijing.aliyuncs.com//${inform.audio.path}${inform.audio.name}?OSSAccessKeyId=${objToken.accessKeyId}&Signature=${objToken.accessKeySecret} &security-token=${objToken.securityToken}` "
			style="width: 100%;" controls loop muted position="absolute" object-fit="fill"></video>
		<view v-if="!inform.audio"><u-image width="100%" height="200" :src="inform.cover" mode="scaleToFill"
				:errorIcon="errorProduct" /></view> -->
				
				
		<view class="free-header">
			<view class="free-title">
				{{inform.title}}
			</view>
			<view class="free-create">
				{{inform.tuijian_time}}
			</view>
		</view>
		<u-tabs lineWidth="25" v-model="tabsIndex" @change="sectionChange" :list="clasList" keyName='title'
			lineColor="#ee0a24">
		</u-tabs>
		<view class="" v-if="tabsIndex === 0"> 
			<view class="" v-html="inform.image_text" v-if="inform.repeat_buy || inform.expense === 0">
			</view>
			<view class="" v-html="inform.custom_desc" v-else>
			</view>
		</view>

		<!-- 课程评价 -->
		<view class="evaluate" v-if="tabsIndex === 1">
			<view class="evaluate-list" v-for="item in evaluateList" :key="item.rate">
				<view class="evaluate-header">
					<u--image :src="item.avatar" width="50rpx" height="50rpx" shape="circle"></u--image>
					<text>{{ item.nick_name }}</text>
				</view>
				<view class="evaluate-rating">
					<text>商品名: {{ item.infoname }} </text>

					<text> 星级: </text>
					<u-rate activeColor="#FFD21E" :value="item.rate" readonly></u-rate>
				</view>
				<view class="evaluate-content">
					{{ item.message }}
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"
				v-if="!evaluateList.length"></u-empty>
		</view>

		<view class="cate-container" v-if="tabsIndex === 2">
			<view class="cate-list">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="cate-list-record" v-for="item in columndata" :key="item.id" @click="jump(item)">
						<view class="">
							<u--image :src="item.cover_url" width='110px' height='90px' mode="scaleToFill"
								:errorIcon="errorProduct">

							</u--image>
						</view>
						<view class="cate-list-inform">
							<view class="inform-title">
								{{item.title}}
							</view>
							<view class="inform-left">
								<view class="inform-price">
									{{item.price == '0.00' ?'免费':item.price}}
								</view>
								<view class="">
									{{item.view || 0}}次观看
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<u-modal :show="show" :title="title" :content='content' @confirm="confirm"></u-modal>

		<!-- 底部选项卡 -->
		<view class="footer-fixed" >
			<view class="footer-container">
				<!-- 导航图标 -->
				<view class="foo-item-fast">
					<!-- 客服 (仅微信小程序端显示) -->

					<!-- <button class="btn-normal" open-type="contact"> -->
					<view class="fast-item" @click="chat">
						<view class="fast-icon">
							<u-icon name="kefu-ermai" color="rgb(255, 80, 0)" size="22"></u-icon>
						</view>
						<view class="fast-text">
							<text>客服</text>
						</view>
					</view>
					<!-- </button> -->

					<!-- 购物车 -->
					<view class="fast-item fast-item--cart" @click="navigator('/pages/cart/index')">
						<view v-if="0" class="fast-badge fast-badge--fixed"> </view>
						<view class="fast-icon">
							<u-icon name="shopping-cart" size="22"></u-icon>
						</view>
						<view class="fast-text">
							<text>购物车</text>
						</view>
					</view>

					<view class="fast-item fast-item--cart">
						<view v-if="0" class="fast-badge fast-badge--fixed"> </view>
						<view class="fast-icon">
							<u-icon :name="inform.isselect ? 'star-fill' : 'star'" size="22" color="rgb(255, 80, 0)"
								@click="collection"></u-icon>
						</view>
						<view class="fast-text">
							<text>{{ inform.isselect ? "已收藏" : "收藏" }}</text>
						</view>
					</view>
				</view>
				<!-- 操作按钮 -->
				<view class="foo-item-btn">
					<view class="btn-wrapper" v-if="!inform.repeat_buy && inform.expense===1">
						<view class="btn-item btn-item-deputy" @click="addshopcart">
							<text>加入购物车</text>
						</view>
						<view class="btn-item btn-item-main" @click="clickbuy">
							<text>立即购买</text>
						</view>
					</view>
					<view class="btn-wrapper" v-if="inform.repeat_buy === true">
						<view class="btn-item btn-item-deputy">
							<text>你已购买</text>
						</view>
					</view>
					<view class="btn-wrapper" v-if="inform.expense === 0">
						<view class="btn-item btn-item-deputy">
							<text>免费课程</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- <view class="free-foot" v-if="inform.type === 'audio'">
			<view class="" @click="shows = true">
				<u-icon name="order" size="26"></u-icon>
				<text>课程目录</text>
			</view>
			<view class="">
				<u-icon name="gift" size="26" @click="invite"></u-icon>
				<text>邀请好友观看</text>
			</view>
		
		</view> -->
		<!-- 	<u-popup :show="shows" @close="close"  mode='left'>
			<view style="width: 400rpx;">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="content-box">

						<view class="pop-cell" v-for="item in knowledgedata" :key="item.id">
							{{item.title}}
						</view>

						<view class="noMore">没有更多数据了哦~~</view>
					</view>
				</scroll-view>


			</view>
		</u-popup> -->
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		api_addusercollect,
		api_getrandgoodslist,
		api_getoneknowledge,
		api_getevaluate,
		api_delusercollect,
		api_getstsvideotoken,
		api_getknowledgelist,
		api_addshopcart,

		api_getdetail,
		api_recommend
	} from '@/api/product.js'
	import config from '@/utils/config'
	import {

		isWeixin
	} from "@/utils/util";
	import shopHead from '@/components/shop_head/index.vue'

	export default {
		components: {
			shopHead,
		},
		data() {
			return {
				errorProduct: require('@/static/img/default_image.jpg'),
				inform: {},
				tabsIndex: 0,
				// 分类
				clasList: [{

						"title": "详情",

					},

					{

						"title": "课程评价",

					},
					{

						"title": "相关推荐",

					},


				],
				// 相关推荐
				columndata: [],

				evaluateList: [],
				knowledgedata: [],
				show: false,
				objData: {},
				objToken: {},
				isbuyfull: null,
				shows: false,
				show: false,
				title: '温馨提示',
				content: '请在微信客户端打开此页面支付购买'
			};
		},
		onLoad(option) {
			this.option = option;
		
			this.query();
			this.getstsvideotoken();
		},
		methods: {
			async query() {
				uni.showLoading({
					title: "数据加载中..."
				});
				let res = await api_getdetail(this.option);
				if (res.code == 1) {
					this.inform = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					});
				}
				// let result = await api_getknowledgelist(this.option);
				// if (result.code == 1) {
				// 	this.isbuyfull = result.data.isbuyfull;
				// 	console.log(this.isbuyfull, "this.isbuyfull");
				// 	this.knowledgedata = result.data.knowledgedata;
				// } else {
				// 	uni.showToast({
				// 		title: result.msg,
				// 		icon: "error",
				// 	});
				// }
				// let res2 = await api_getevaluate({
				// 	info_id: this.option.id,
				// 	...this.option
				// });
				// if (res2.code == 1) {
				// 	this.evaluateList = res2.data;
				// } else {
				// 	uni.showToast({
				// 		title: res2.msg,
				// 		icon: 'error'
				// 	});
				// }
				uni.hideLoading();
			},
			async getstsvideotoken() {
				let res = await api_getstsvideotoken(this.option)
				// console.log(res,"res")
				this.objToken = res.data;
				console.log(this.objToken, 'this.objToken ')
			},
			async getrandgoodslist() {
				let app = this;
				// let form = {
				// 	category_id: app.option.columnid,
				// 	id: app.inform.category_id,
				// 	k_id: app.option.id,
				// 	shop_name: "db",
				// 	status: 1
				// }
				let res = await api_recommend(this.option)
				console.log(res,"res")
				if (res.code == 1) {
					this.columndata = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					});
				}
			},
			sectionChange(index) {
				this.tabsIndex = index.index;
				if (this.tabsIndex === 2) {
					this.getrandgoodslist()
				}
			},
			collection() {

				this.objData.isselect = !this.objData.isselect;
			},
			chat() {
				uni.navigateTo({
					url: `/pages/chat_window/index?id=${this.option.id}`,

				})

			},
			jump(item) {
				uni.reLaunch({
					url: '/pages/free_courses/index' + `?id=${item.id}&columnid=order&data_type=${item.data_type}`
				})
			},
			async addshopcart() {
				let opt = {
					...this.option,
					type: this.option.data_type
				}
				let res = await api_addshopcart(opt);
				uni.showToast({
					title: res.msg,
					icon: "none",
					fontSize: 18,
				});
			},
			navigator(url) {
				// uni.navigateTo({
				// 	url: url
				// })
				uni.reLaunch({
					url: url
				});


			},
			clickbuy(id, type) {
				uni.navigateTo({
					url: `/pages/placeorder/index?ids=${this.option.id}&data_type=${this.option.data_type}`,
				});
				// 购买
				if (isWeixin()) {
					this.toOrderOne(this.objData.id, this.objData.type)

				} else {
					this.show = true;
				}
			},
			clickbuyone(id, type) {
				if (isWeixin()) {
					console.log(1111)
					this.toOrderOne(id, type)
				} else {

					this.show = true;

				}
			},
			toOrderOne(id, type) {
				// let domainname = this.$route.params.domainname;
				let FrontUrl = window.location.protocol + '//' + window.location.host;
				if (type == 'exam') {
					// let url = config.baseURL + '/user/wxzhifu/getweixinopenid' + `?nexturl=${encodeURIComponent(nexturl)}`;
					const nexturl = FrontUrl +
						`/pages/product/index?id=${id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
					let url = config.baseURL + '/user/wxzhifu/getweixinopenid' +
						`?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
					window.location.href = url;
				} else {
					const nexturl = FrontUrl +
						`/pages/product/index?id=${id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
					console.log(nexturl);
					let url = config.baseURL + '/user/wxzhifu/getweixinopenid' +
						`?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
					window.location.href = url;
				}
				//this.$router.push({ name: 'order', query: { id: this.id } });
			},
			async collection() {
				let app = this;

				let apiFunction = this.objData.isselect ? api_delusercollect : api_addusercollect;

				let res = await apiFunction({
					columnid: app.option.id,
					shop_name: "db"
				});

				if (res.code == 1) {
					this.objData.isselect = !this.objData.isselect;
				}

				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			},
			confirm() {

				// 3秒后自动关闭
				this.show = false;

			},
			invite() {
				let url = window.location.href
				let app = this;
				uni.setClipboardData({
					data: url,

					showToast: false,
					success: function() {
						console.log('文本已复制到剪贴板');

						app.$refs.uToast.show({
							message: '复制成功,去发送给好友吧',
							complete() {

							}
						})
					}
				});

			},
			close() {
				this.shows = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "./detail.scss";

	.noMore {
		font-size: 14px;
		text-align: center;
		color: #ccc;
		margin: 20px 0 0;
	}

	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-around;
		//这个是为了让代码块均匀分布
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
		//这个是为了让元素恢复原位
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
		//经过查看源码得知，下划线之所以错位，是因为每一个子盒子加起来并没有撑满整个盒子，所以当下划线取定位的时候，就会发生错位，因为两个子盒子宽度无法沾满整个盒子，所以就需要flex：1来沾满盒子。
	}

	.free-courses {
		.free-header {
			box-shadow: 0 4px 6px rgb(238, 238, 238);
			padding: 0 20rpx;

			.free-title {
				font-size: 34rpx;
				font-weight: 600;
				padding: 20rpx 0;
			}

			.free-create {
				font-size: 28rpx;
				color: rgb(170, 170, 170);
			}
		}



		.evaluate {
			padding-bottom: 100rpx;

			.evaluate-list {
				padding: 22rpx;
			}

			.evaluate-header {
				display: flex;
				align-items: center;
				font-size: 26rpx;

				text {


					margin-left: 6rpx;
				}
			}

			.evaluate-content {
				font-size: 28rpx;
			}

			.evaluate-rating {
				display: flex;
				font-size: 26rpx;
				color: #969799;
				margin: 10rpx 0;
			}
		}


		.cate-container {

			padding-bottom: 100rpx;

			.cate-title {
				background: #fff;
				display: flex;
				justify-content: space-between;
				padding: 14rpx 20rpx;
				border-radius: 10rpx;
				align-items: center;
				// border: 1px solid #eee;
				height: 40rpx;

				>view {
					display: flex;
					align-items: center;
					font-size: 28rpx;
				}

				.text {
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.cate-list {
				padding: 10rpx 0;
				height: 400rpx;

				.cate-list-record {
					display: flex;
					justify-content: space-between;
					padding: 14rpx 10rpx;
					border-radius: 10rpx;
					box-shadow: 0 4px 6px rgb(238, 238, 238);
					background: #fff;
					margin: 0px 14rpx;
					margin-bottom: 10rpx;

					.cate-list-inform {
						// background: #fff;
						// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 20rpx 16rpx;

						.inform-title {
							font-size: 24rpx;
						}

						.inform-left {
							display: flex;
							justify-content: space-between;

							.inform-price {

								color: red;
							}

							>view {
								font-size: 24rpx;
								color: #969799;
							}
						}


					}
				}


			}


		}


		.free-foot {
			box-shadow: 0 -4px 6px rgb(238, 238, 238);
			background: #fff;
			padding: 10rpx 0;
			display: flex;
			position: fixed;
			bottom: 0;
			width: 100%;
			text-align: center;

			/deep/ {
				.u-icon__icon {
					margin: auto;
					// flex: 1;
				}
			}

			>view {
				text-align: center;
				width: calc(100% / 2);
				font-size: 28rpx;
			}
		}

	}


	.free-foot {
		box-shadow: 0 -4px 6px rgb(238, 238, 238);
		background: #fff;
		padding: 10rpx 0;
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;

		/deep/ {
			.u-icon__icon {
				margin: auto;
				// flex: 1;
			}
		}

		>view {
			text-align: center;
			width: calc(100% / 2);
			font-size: 28rpx;
		}
	}
</style>